<!DOCTYPE html>
<html>

<head>
    <title>商品列表</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/weui-master/dist/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../lib/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../sys/css/foot.css">
    <link rel="stylesheet" type="text/css" href="../sys/css/goodslist.css">
    <style lang="css">

    </style>
</head>

<body>
    <div class="box">
        <div class="cover" v-show="(pricebox==true)||(matchbox==true)"></div>
        <header class="search">
            <input type="text" name="" v-model.trim="goodskeywords">
            <i class="fa fa-search " @click="goodslist()"></i>
        </header>
        <section>
            <div class="content-top ">
                <div class="match active" @click="showOrHide(1)">
                    <span v-text="matchtypetext"></span>
                    <i class="fa fa-caret-down" v-if="matchbox==false"></i>
                    <i class="fa fa-caret-up" v-else></i>
                </div>
                <div class="match " @click="showOrHide(2)"><span>销量优先</span></div>
                <div class="match" style="width: 25%;" @click="showOrHide(3)">筛选</div>
            </div>
            <div class="matchbox" v-show="matchbox==true">
                <ul>
                    <li @click="changeMatchType(1)" style="color:#FF4400"><span class="match-left">综合排序</span><span class="match-right" v-show="matchtype==1">√</span></li>
                    <li @click="changeMatchType(2)"><span class="match-left">信用</span><span class="match-right" v-show="matchtype==2">√</span></li>
                    <li @click="changeMatchType(3)"><span class="match-left">价格从高到低</span><span class="match-right" v-show="matchtype==3">√</span></li>
                    <li @click="changeMatchType(4)"><span class="match-left">价格从低到高</span><span class="match-right" v-show="matchtype==4">√</span></li>
                </ul>
            </div>
            <div class="pricebox" v-show="pricebox==true">
                <span>价格区间(元)</span>
                <div>
                    <input type="number" placeholder="最低价">---
                    <input type="number" placeholder="最高价">
                </div>
                <div>
                    <div class="free">包 邮</div>
                    <button class="mybtn" @click="filtrate()">完成</button>
                </div>
            </div>
            <div class="goodslist">
                <table>
                    <tr v-for="goods in goodslist" @click="jumpToGoodsdetail">
                        <td style="width:45%;">
                            <div class="goods-left">
                                <img :src="goods.img" />
                            </div>
                        </td>
                        <td>
                            <div class="goods-right">
                                <div class="title">
                                    <p v-text="goods.title"></p>
                                </div>
                                <div>
                                    <span class="price" v-text="goods.price"></span>
                                    <span class="num"></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
    </div>
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../data/shop.json"></script>
    <script>
    $(function() {
        var windowHeight = $(window).height();


        $(".cover").css("height", windowHeight);
        var box = new Vue({
            el: '.box',
            data: goodslist,
            methods: {
                choosemune: function(i) {
                    window.location.href = menulist[i];
                },
                showOrHide: function(i) {
                    if ((i == 1) || (i == 2)) {
                        $(".match").removeClass("active");
                        $(".match:nth-child(" + i + ")").addClass("active");
                        if (i == 1) {
                            if (this.matchbox == false) {
                                this.matchbox = true;
                            } else {
                                this.matchbox = false;
                            }


                        }

                    } else if (i == 3) {
                        if (this.pricebox == false) {
                            this.pricebox = true;
                        } else {
                            this.pricebox = false;
                        }

                    }

                },
                changeMatchType: function(i) {
                    this.matchtype = i;
                    $(".matchbox li").css("color", " #999999");
                    $(".matchbox li:nth-child(" + i + ")").css("color", "#FF4400");
                    this.matchbox = false;
                    if (i == 1) {
                        this.matchtypetext = '综合排序';
                    } else if (i == 2) {
                        this.matchtypetext = '信用';
                    } else if (i == 3) {
                        this.matchtypetext = '价格由高到低';
                    } else {
                        this.matchtypetext = '价格由低到高';
                    }
                },
                filtrate: function() {
                    this.pricebox = false;

                },
                jumpToGoodsdetail: function() {
                    window.location.href = "goodsdetail.html"
                }

            }
        })

    })
    </script>
</body>

</html>
